<template>
    <div class="smartWarning-index yuan-container container">
        <a-card>
            <a-tabs type="card" :default-active-key="pageType" @change="tabChange">
                <a-tab-pane v-for="item in typeArr" :key="item.val" :tab="item.title"></a-tab-pane>
            </a-tabs>

            <StatusPanelVue :status="getLevel(item.level)" name="品种数量" :val="item.num" v-for="item in pageTotalArr"
                :key="item.level" />

            <!-- <a-button type="primary" @click="showAnalysis" style="float:right">动态分析</a-button> -->
            <!-- <div style="margin-bottom:10px" v-if="pageType==='配方颗粒'">
                <a-button style="margin-right:10px" :type="pageParams.spec ==='大袋'?'primary':''"
                    @click="topSpecChange('大袋')">大袋</a-button>
                <a-button :type="pageParams.spec ==='小袋'?'primary':''" @click="topSpecChange('小袋')">小袋</a-button>
            </div> -->
            <!-- <div style="margin-bottom:10px">
                <a-button style="margin-right:10px" :type="pageParams.prodScheduling ==='1'?'primary':''"
                    @click="topStatusChange('1')">待排产</a-button>
                <a-button style="margin-right:10px" :type="pageParams.prodScheduling ==='2'?'primary':''"
                    @click="topStatusChange('2')">已排产</a-button>
                <a-button :type="pageParams.prodScheduling ==='3'?'primary':''" @click="topStatusChange('3')">已关闭</a-button>
            </div> -->
            <div class="filter-panel">
                <div class="filter-list">
                    <span>品名：</span>
                    <a-input-search allowClear v-model="pageParams.name" placeholder="请输入关键字" @search="resetList" />
                </div>
                <div class="filter-list">
                    <span>标准：</span>
                    <a-select v-model="pageParams.standard" @change="resetList" allowClear placeholder="请选择标准">
                        <a-select-option value="国标">国标</a-select-option>
                        <a-select-option value="省标">省标</a-select-option>
                        <a-select-option value="省标-北京">省标-北京</a-select-option>
                        <a-select-option value="省标-上海">省标-上海</a-select-option>
<!--                        <a-select-option value="国标-北京">国标-北京</a-select-option>-->
                    </a-select>
                </div>
                <div class="filter-list">
                    <span>产品大类：</span>
                    <a-select v-model="pageParams.inventoryType" @change="resetList" allowClear placeholder="请选择大类">
                        <a-select-option value="C60">C60</a-select-option>
                        <a-select-option value="C70">C70</a-select-option>
                        <a-select-option value="C80">C80</a-select-option>
                        <a-select-option value="C90">C90</a-select-option>
                    </a-select>
                </div>
                <div class="filter-list">
                    <span>可供销售天数：</span>
                    <span class="filter-range">
                        <a-input v-model="pageParams.availableDaySellStart"></a-input>
                        <span class="filter-tips">~</span>
                        <a-input v-model="pageParams.availableDaySellEnd"></a-input>
                        <span class="filter-tips">天</span>
                    </span>

                </div>
                <div class="filter-list">
                    <span>当前查询品种数量：{{pagination.total}}</span>
                </div>

                <a-button type="primary" @click="getList" class="filter-list">搜索</a-button>
                <a-button type="primary" style="float: right;" @click="handleExport">导出</a-button>
            </div>
            <div class="table">
                <a-table bordered :rowKey="(row)=>row.id" :data-source="pageList" :columns="columns" :pagination="pagination"
                    :loading="loading">

                    <template slot='action' slot-scope="text, record, index">
                        <div>
                            <a-button style="margin-right: 10px" type="primary" @click="showDetail(record)">详情</a-button>
<!--                           <a-button style="margin-right: 10px" type="warning" @click="showPlan(record)"-->
<!--                                v-if="pageType==='配方颗粒' && record.level!=='低'">生产计划</a-button>-->
                            <a-button style="margin-right: 10px" type="success" @click="showInventory(record)">库存趋势</a-button>
                        </div>
                    </template>

                </a-table>
            </div>
        </a-card>
        <!-- 动态分析 -->
        <AnalysisVue :visible="analysisVisible" @closeModal="() => analysisVisible = false" />
        <!-- 库存趋势 -->
        <InventoryVue :name="inventoryName" :type="inventoryType" :standard="inventoryStandard" :visible="inventoryVisible" @closeModal="inventoryVueClose" />
        <!-- 生产计划 -->
        <Plan :visible="planVisible" @closeModal="() => planVisible = false" :parentInfo="selectPlanDetail" @reloadList="getList"/>
        <!-- 详情 -->
        <Detail :visible="detailVisible" @closeModal="() => detailVisible = false" :type="pageType" :parentInfo="selDetail"
            @resetList="resetList" />
    </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import StatusPanelVue from "./components/statusPanel.vue";
import { h } from "vue";
import AnalysisVue from "./components/analysis.vue";
import InventoryVue from "./components/inventory.vue";
import Detail from "./components/detail.vue";
import Plan from "./components/planV2.vue";
import warningApi from "@/api/warningApi";
import { toDecimalNoZero } from "@/utils";
import { downLoadFile } from "@/utils";

@Component({
    name: "dom",
    components: { StatusPanelVue, AnalysisVue, InventoryVue, Detail,Plan },
})
export default class index extends Vue {
    loading = false;
    typeArr = [
        { title: "成品预警", val: "配方颗粒", table: "columns1" },
        // { title: "颗粒预警", val: "配方颗粒(颗粒)", table: "columns2" },
        // { title: "提取物预警", val: "提取物", table: "columns3" },
        // { title: "提取饮片预警", val: "饮片", table: "columns4" },
        // { title: "中药材预警", val: "中药材", table: "columns5" },
        // { title: "辅料预警", val: "辅料", table: "columns6" },
    ];
    pageType = "配方颗粒";
    pageParams = {
        name: undefined,
        inventoryType: undefined,
        standard: undefined,
        availableDaySellStart:undefined,
        availableDaySellEnd:undefined,
    };
    pagination = {
        pageSize: 10,
        current: 1,
        total: 0,
        showTotal: (total: number) => `共${total}条`,
        onChange: this.pageChange,
    };
    pageList: any[] = [{ id: 1 }];
    // 成品table
    columns1 = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: string, record: any, index: number) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "name",
            key: "name",
            title: "品名",
        },
        {
            align: "center",
            dataIndex: "inventoryType",
            key: "inventoryType",
            title: "产品大类",
        },
        {
            align: "center",
            dataIndex: "standard",
            key: "standard",
            title: "标准",

        },

        {
            align: "center",
            dataIndex: "stockNum",
            key: "stockNum",
            title: "成品库存量(袋)",
        },
        {
            align: "center",
            dataIndex: "stockNumSys",
            key: "stockNumSys",
            title: "中转库库存量(袋)",
            className: "purple-header",
        },
        {
            align: "center",
            dataIndex: "stockNumErp",
            key: "stockNumErp",
            title: "erp成品库存量(袋)",
            className: "purple-header",
        },
        // {
        //     align: "center",
        //     dataIndex: "stockNum3",
        //     key: "stockNum3",
        //     title: "计划待生产库存量(袋)",
        // },
        {
            align: "center",
            dataIndex: "availableSellDay",
            key: "availableSellDay",
            title: "可供销售天数(天)",
        },
        {
            align: "center",
            dataIndex: "planNum",
            key: "planNum",
            title: "计划包装量(袋)",
        },
        {
            align: "center",
            dataIndex: "differenceNum",
            key: "differenceNum",
            title: "差量(袋)",
            customRender: (text: string, record: any, index: number) => {
                const dom = h("div",{class: "c-danger"},toDecimalNoZero(record.differenceNum,0));
                return dom;
            },
        },
        {
            align: "center",
            dataIndex: "level",
            key: "level",
            title: "紧急程度",
            customRender: (text: string, record: any, index: number) => {
                const typeObj = {
                    高: "#f76a4a",
                    中: "#faa440",
                    低: "#22b585",
                };
                const dom = h(
                    "div",
                    {
                        style: {
                            height: "30px",
                            width: "40px",
                            background: typeObj[record.level] || "",
                            margin: "auto",
                            borderRadius: "4px",
                            color: "#fff",
                            lineHeight: "30px",
                        },
                    },
                    record.level
                );
                return dom;
            },
        },
        {
            align: "center",
            dataIndex: "keLiStock",
            key: "keLiStock",
            title: "颗粒库存量(kg)",
        },
        {
            align: "center",
            dataIndex: "jgfstock",
            key: "jgfstock",
            title: "提取物库存量(kg)",
        },
        {
            align: "center",
            dataIndex: "ypstock",
            key: "ypstock",
            title: "提取饮片库存量(kg)",
        },
        {
            align: "center",
            dataIndex: "ycstock",
            key: "ycstock",
            title: "药材库存量(kg)",
        },

        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 340,
            scopedSlots: { customRender: "action" },
        },
    ];
    // 颗粒table
    columns2 = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: string, record: any, index: number) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "name",
            key: "name",
            title: "品名",
        },
        {
            align: "center",
            dataIndex: "standard",
            key: "standard",
            title: "标准",

        },
        {
            align: "center",
            dataIndex: "stockNum",
            key: "stockNum",
            title: "颗粒库存量(kg)",
        },
        {
            align: "center",
            dataIndex: "jgfstock",
            key: "jgfstock",
            title: "提取物库存量(kg)",
        },
        {
            align: "center",
            dataIndex: "ypstock",
            key: "ypstock",
            title: "提取饮片库存量(kg)",
        },
        {
            align: "center",
            dataIndex: "ycstock",
            key: "ycstock",
            title: "药材库存量(kg)",
        },

        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 340,
            scopedSlots: { customRender: "action" },
        },
    ];
    // 提取物table
    columns3 = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: string, record: any, index: number) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "name",
            key: "name",
            title: "品名",
        },
        {
            align: "center",
            dataIndex: "standard",
            key: "standard",
            title: "标准",

        },
        {
            align: "center",
            dataIndex: "stockNum",
            key: "stockNum",
            title: "提取物库存量(kg)",
        },
        {
            align: "center",
            dataIndex: "ypstock",
            key: "ypstock",
            title: "提取饮片库存量(kg)",
        },
        {
            align: "center",
            dataIndex: "ycstock",
            key: "ycstock",
            title: "药材库存量(kg)",
        },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 340,
            scopedSlots: { customRender: "action" },
        },
    ];
    // 提取饮片table
    columns4 = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: string, record: any, index: number) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "name",
            key: "name",
            title: "品名",
        },
        {
            align: "center",
            dataIndex: "standard",
            key: "standard",
            title: "标准",

        },
        {
            align: "center",
            dataIndex: "stockNum",
            key: "stockNum",
            title: "提取饮片库存量(kg)",
        },
        {
            align: "center",
            dataIndex: "ycstock",
            key: "ycstock",
            title: "药材库存量(kg)",
        },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 340,
            scopedSlots: { customRender: "action" },
        },
    ];
    // 中药材table
    columns5 = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: string, record: any, index: number) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "name",
            key: "name",
            title: "品名",
        },
        {
            align: "center",
            dataIndex: "standard",
            key: "standard",
            title: "标准",

        },
        {
            align: "center",
            dataIndex: "stockNum",
            key: "stockNum",
            title: "药材库存量(kg)",
        },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 340,
            scopedSlots: { customRender: "action" },
        },
    ];
    // 辅料table
    columns6 = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: string, record: any, index: number) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "name",
            key: "name",
            title: "品名",
        },
        {
            align: "center",
            dataIndex: "stockNum",
            key: "stockNum",
            title: "辅料库存量(kg)",
        },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 340,
            scopedSlots: { customRender: "action" },
        },
    ];
    columns: any = [];
    async getList() {
        this.pageList = [];
        this.loading = true;
        await this.getPageTotal();
        try {
            const res = await warningApi.alarmFindByList({
                ...this.pageParams,
                pageSize: this.pagination.pageSize,
                page: this.pagination.current,
                materialType: this.pageType,
                //spec: this.pageType === "配方颗粒" ? this.pageParams.spec : "",
            });
            this.pagination.total = res.data?.total || 0;
            this.pageList = res.data?.records || [];
        } finally {
            this.loading = false;
        }
    }
    pageTotalArr = [];
    async getPageTotal() {
        try {
            const res = await warningApi.alarmGetAlarmNum({
                //spec: this.pageParams.spec,
                materialType: this.pageType,
            });
            this.pageTotalArr = res.data || [];
        } finally {
            //
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;

        this.getList();
    }
    // topSpecChange(str: string) {
    //     if (this.pageParams.spec === str) return;
    //     this.pageParams.spec = str;
    //     this.resetList();
    // }
    // topStatusChange(str: string) {
    //     if (this.pageParams.prodScheduling === str) return;
    //     this.pageParams.prodScheduling = str;
    //     this.resetList();
    // }

    mounted() {
        this.columns = this.columns1;
        this.getList();
    }

    tabChange(e: string) {
        const find = this.typeArr.find((item) => {
            return item.val === e;
        });
        if (find) {
            this.columns = this[find.table];
        }
        this.pageType = e;

        this.resetList();
    }
    analysisVisible = false;
    showAnalysis() {
        this.analysisVisible = true;
    }
    inventoryVisible = false;
    inventoryStandard = "";
    inventoryType = "";
    inventoryName = "";
    showInventory(record) {
        this.inventoryVisible = true;
        this.inventoryStandard = record.standard;
        this.inventoryType = record.inventoryType;
        this.inventoryName = record.name;
    }
    inventoryVueClose(){
        this.inventoryVisible = false
        this.inventoryStandard = '';
        this.inventoryType = '';
        this.inventoryName ='';
    }
    planVisible = false;
    selectPlanDetail = {};
    showPlan(item) {
        this.selectPlanDetail = item;
        this.planVisible = true;
    }

    detailVisible = false;
    selDetail = {};
    showDetail(item) {
        this.selDetail = item;
        this.detailVisible = true;
    }
    getLevel(str: string) {
        const a = { 高: "danger", 中: "warning", 低: "success" };
        return a[str] || "";
    }
    handleExport() {
        warningApi.exportData({...this.pageParams,materialType:'配方颗粒'},(res:any)=>{
            const blob = new Blob([res.data], {
                type: 'application/vnd.ms-excel' 
            });
            downLoadFile(blob, '智能预警');
        });
       this.$message.info('文件较大，请耐心等待')
    }
}
</script>
<style lang="scss">
.ant-table-thead > tr > th.purple-header {
    background-color: #c787ee !important;
    color: #fff !important;
}
</style>
